<template>
  <div class="project">
    <div class="title">项目信息</div>
    <div class="promain">
      <div class="uls">
        <div class="li" v-for="item in one">
          <div class="name">{{item.name}}</div>
          <div class="details">{{item.value}}</div>
        </div>
      </div>
      <div class="uls">
        <div class="li" v-for="item in two">
          <div class="name">{{item.name}}</div>
          <div class="details">{{item.value}}</div>
        </div>
      </div>
      <div class="uls">
        <div class="li" v-for="item in three">
          <div class="name">{{item.name}}</div>
          <div class="details">{{item.value}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      one:[
        {name:'项目名称',value:'衡水智慧农田'},
        {name:'地形地貌',value:'平原'},
        {name:'总投资',value:'1255万元'},
        {name:'建设地址',value:'衡水市索水'},
        {name:'备注信息',value:'无'},
      ],
      two:[
        {name:'项目编号',value:'A0291'},
        {name:'建设面积',value:'1203.09平方米'},
        {name:'三区散州项目',value:'无'},
        {name:'主要建设内容',value:'改良土地'},
      ],
      three:[
        {name:'立项年度',value:'2022-02-12'},
        {name:'搞笑节水灌溉面积',value:'120000平方米'},
        {name:'平困地区项目',value:'无'},
      ],
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
.project {
  width: 100%;
  height: 100%;
  background: url(~@/assets/images/projectbg.png) no-repeat;
  background-size: 100% 100%;
  .title {
    font-size: 24px;
    font-family: ysbt;
    padding: 10px 30px;
  }
  .promain {
    display: flex;
    justify-content: space-between;
    .uls {
      flex: 1;
      border-right: 1px solid;
      border-image: linear-gradient(to bottom, #62BBFF 10%, rgba(255, 255, 255, 0) 100%) 2 2 2 2;
      .li {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 0 45px;
        line-height: 25px;
        .name {
          color: #A9BED6;
        }
      }
    }
  }
}
</style>